<template>
    <div class="pageMain">

        <div class="loginText" @click="changeFlag">
            {{
            loginFlag == 2 ? '手机号' : '微信'
        }}登录
        </div>

        <img src="../../assets/login/yuan.png" class="yuanImg" alt="">

        <!-- v-if="isShow" -->
        <template>
            <!-- <img src="../../assets/login/logo.png" class="logoImg" alt=""> -->

            <img src="../../assets/login/tip.png" class="tipImg" alt="">
        </template>


        <div class="wxBtn" @click="authLogin" v-if="loginFlag == 2">
            <div>
                <img src="../../assets/login/wx.png" alt="">
            </div>
            <span>微信登录</span>
        </div>

        <div class="telLoginBox" v-if="loginFlag == 1">
            <div class="infoBox">
                <div>
                    <img src="../../assets/login/account.png" alt=""><input type="text" v-model="account"
                        placeholder="请输入账号" @focus="isShow = false" @blur="isShow = true">
                </div>
                <div>
                    <img src="../../assets/login/password.png" alt=""><input type="text" v-model="password"
                        placeholder="请输入密码" @focus="isShow = false" @blur="isShow = true">
                </div>
            </div>
            <div class="loginTipBox" v-if="false">
                <span>忘记密码</span>
                <span>立即注册</span>
            </div>
            <div class="loginBtn" @click="loginHandle">登录</div>
        </div>



        <img src="../../assets/login/boLang.png" class="boLangImg" alt="">

        <!-- <div class="logoBox">
            <img src="../../assets/logo.png" alt="">
        </div> -->

        <!-- <div class="loginBtn" >微信登录</div> -->
        <!-- <div class="loginBtn" @click="authUserInfo">用户信息</div> -->
    </div>
</template>

<script>

import { telLogin, wxLogin } from '../../network/logIn'
import { Loading } from "element-ui";
let that
let loading
export default {
    name: 'HomeR',
    data() {
        return {
            account: '',
            password: '',
            loginFlag: 1, //1 手机号登录  2 微信登录

            isShow: true
        }
    },
    mounted() {

    },
    methods: {
        changeFlag() {
            this.loginFlag = this.loginFlag == 1 ? 2 : 1
            this.isShow = true
        },
        loginHandle() {

            if (this.account == '') {
                this.$toast('请输入账号')
                return
            }

            if (this.password == '') {
                this.$toast('请输入密码')
                return
            }

            console.log(this.account);
            console.log(this.password);


            if (this.account == '10000' && this.password == '123456') {
                var user = {
                    userName: '测试用户',
                    userId: 97740,
                    userImg: '1721718674905336.png',
                    shopId: 1
                }
                localStorage.userId = user.userId
                localStorage.shopId = user.shopId
                localStorage.user = JSON.stringify(user)
                this.$router.replace('/luntan')

            } else {
                this.$toast('账号或密码输入错误')
            }


            return



            telLogin({
                tel: this.account,
                password: this.password,
            }).then(res => {
                if (res.flag) {
                    console.log(JSON.stringify(res));

                    if (res.data.flag == 'success') {
                        var user = res.data.user

                        user = {
                            userName: '测试用户',
                            userId: 97740,
                            userImg: '1721718674905336.png',
                            shopId: 1

                        }

                        localStorage.userId = user.userId
                        localStorage.shopId = user.shopId
                        localStorage.user = JSON.stringify(user)

                        this.$router.replace('/luntan')

                    } else {
                        this.$toast(res.data.msg)
                    }

                }
            })



        },

        authLogin() {

            var user = {
                userName: '测试用户',
                userId: 97740,
                userImg: '1721718674905336.png',
                shopId: 0

            }

            localStorage.userId = user.userId
            localStorage.shopId = user.shopId
            localStorage.user = JSON.stringify(user)

            this.$router.replace('/luntan')


            return

            auths.forEach(item => {
                if (item.id == 'weixin') {
                    s = item
                }
            })

            console.log(JSON.stringify(s));
            // if (!s.authResult) {

            s.login(function (e) {
                console.log(JSON.stringify(e));
                that.$toast('登录认证成功！')

                console.log("登录认证成功！");
                s.getUserInfo(function (e) {
                    console.log(e);
                    console.log(s);

                    console.log("获取用户信息成功：" + JSON.stringify(s.userInfo));
                    var infos = s.userInfo
                    var userInfoStr = JSON.stringify(infos)

                    console.log(infos.unionid);
                    console.log(infos.openid);
                    console.log(userInfoStr);

                    that.loginWXHandle(infos)

                }, function (e) {

                    console.log("获取用户信息失败：" + e.message + " - " + e.code);

                });

            }, function (e) {

                console.log("登录认证失败！");

            });


        },

        loginWXHandle(infos) {
            console.log('进方法');
            console.log(JSON.stringify(infos));

            if (infos.headimgurl == '') {
                infos.headimgurl = 'https://www.ccclkj.cn/zhibanzhang/resource/aimin/user/' + infos.sex + '.png'
            }

            wxLogin({
                unionId: infos.unionid,
                openId: infos.openid,
                userName: infos.nickname,
                userSex: infos.sex == 0 ? '男' : '女',
                userImg: infos.headimgurl,
            }).then(res => {

                if (res.flag) {

                    if (res.data == null) {
                        this.$toast('登录失败，请重试')
                        return
                    }

                    console.log('进方11');
                    console.log(res);
                    console.log(JSON.stringify(res));
                    alert(JSON.stringify(res))
                    that.$toast('登录成功')
                    var user = res.data.user
                    localStorage.user = JSON.stringify(user)
                    localStorage.userId = user.userId
                    localStorage.shopId = user.shopId

                    this.$router.replace('/luntan')
                } else {
                    this.$toast('登录失败，请重试')
                }

            })
        },


    },
    created() {
        // if (localStorage.user) {
        //     this.$router.replace('/luntan')
        // }
        that = this
    },
}





</script>

<style lang='less' scoped>
.pageMain {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: linear-gradient(111deg, #14A870, #20BB66);
}

.yuanImg {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 446px;
    height: 376px;
}


.logoImg {
    position: absolute;
    top: 180px;
    width: 298px;
    height: 350px;
}

.tipImg {
    position: absolute;
    top: 600px;
    width: 300px;
    height: 184px;
}

.wxBtn {
    position: absolute;
    top: 800px;
    margin-top: 14vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 32px;
    color: #FFFFFF;
    line-height: 80px;
}

.wxBtn>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: #15AA6F;
    box-shadow: 0px 2px 8px 0px rgba(8, 80, 53, 0.12);
    border-radius: 30px;
    border: 3px solid #FFFFFF;
}

.wxBtn>div>img {
    width: 88px;
    height: 74px;
}


.boLangImg {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 750px;
    height: 146px;
}


.logoBox {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    background: #0aec4e;
}

.logoBox>img {
    width: 100%;
    height: 100%;
}


.infoBox {
    position: relative;
    box-sizing: border-box;
    // padding: 0 48px;
    width: 520px;
    font-size: 28px;
}

.infoBox>div {
    box-sizing: border-box;
    // padding: 0 20px;
    display: flex;
    align-items: center;
    height: 104px;
    border-bottom: 2px solid #f2f2f2;
}

.infoBox>div>img {
    margin-right: 50px;
    width: 38px;
    height: 42px;
}

.infoBox>div>input {
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    line-height: 48px;

}

.infoBox>div>input::placeholder {
    color: #eee;
}

.telLoginBox {
    position: absolute;
    bottom: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loginBtn {
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 590px;
    height: 74px;
    background: #15AA6F;
    box-shadow: 0px 2px 8px 0px rgba(8, 80, 53, 0.12);
    border-radius: 29px;
    border: 3px solid #FFFFFF;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 32px;
    color: #FFFFFF;
    line-height: 80px;
}

.loginText {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 32px;
    color: #fff;
    z-index: 100;
    text-decoration: underline;
}

.loginTipBox {
    margin: 40px 0 60px;
    display: flex;
    justify-content: space-between;
    width: 520px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 48px;
}
</style>